<template>
  <div>
    <div id="main" ref="map" style="height:600px;width:100%;background:#1e1e1e"/>
    <div style="width:10%;margin: 0 auto;">
        <el-row type="flex">
          <div v-for="item in choosecity" :key="item.name" :value="item.name">
            <div @click="chartClick({name:item.name})">
              <el-tag style="font-size:18px;">{{item.name}}</el-tag>
            </div>
          </div>
        </el-row>
    </div>
  </div>
</template>
 
<script>
import echarts from "echarts";
import axios from 'axios'
// import '@/assets/map/zhejiang.js'
 
export default {
 
  data() {
    return {
      myChart: null,
      provinceList: ["浙江省","杭州市","宁波市","温州市","绍兴市","湖州市","嘉兴市","金华市","衢州市","台州市","丽水市","舟山市"],
      cityProper: {
        '浙江省': 'static/map/zhejiang.json',
        '杭州市': 'static/map/hangzhou.json',
        '宁波市': 'static/map/ningbo.json',
        '温州市': 'static/map/wenzhou.json',
        '绍兴市': 'static/map/shaoxing.json',
        '湖州市': 'static/map/huzhou.json',
        '嘉兴市': 'static/map/jiaxing.json',
        '金华市': 'static/map/jinhua.json',
        '衢州市': 'static/map/quzhou.json',
        '台州市': 'static/map/taizhou.json',
        '丽水市': 'static/map/lishui.json',
        '舟山市': 'static/map/zhoushan.json',
      },
      geoCoordMap: { //这里放你打点的坐标信息，虚拟信息
        '杭州市':[120.216481,30.251863],
      },
      locValue: [
          {name:"杭州市",value:"100"},
      ],
      choosecity: [
        {name:'浙江省'}
      ],
      geoData: [],
      geoArr: [],
      // geoCoordMap: {},
      option:{
          title: { // 标题
            text: "浙江省地图",
            left: "center",
            padding: 30,
            textStyle: {
              color: "#fff",
              fontSize: "30"
            }
          },
          tooltip: {
            show: true,
            alwaysShowContent:false,
            backgroundColor:'rgba(50,50,50,0.7)',
            hideDelay:100,
            triggerOn:'mousemove',
            enterable:true,
            position:['60%','70%'],
            formatter:function(params, ticket, callback){
              return '你好啊，世界！！' + params.data.name;
            }
          },
          geo: [{ // 地图
            type: 'map',  
            map: 'zhejiang',  // 地区名字，重要参数
            roam: true, //控制是否可以缩放
            itemStyle: {
                areaColor: "#d7bed9",
                borderColor: "#111",
            },
            emphasis: {
              label:{
                show: false
              },
              itemStyle: {
                areaColor: "#f5d4f8"
              },
              textStyle: {
                  color: "#F0F8FB"
              }
            },
            data: [],  // 数据，重要参数
            // label: {    // 标签的显示
            //   normal: { show: false },
            //   emphasis: { show: true }
            // },
            label: { //控制各省市名称是否显示
                normal: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                emphasis: {
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
          }],
          series: [{ // 散点分布
              type: "scatter", // 中国地图下显示热力图，省级地图下显示精确分布点
              coordinateSystem: "geo",
              data: [['120.216481', '30.251863']],
              blurSize: 20,
              symbol: 'pin',  //控制坐标点的样式
              symbolSize: 20,//控制坐标点的SIZE
              // symbolSize: function(val) {
              //   return val[2] / 10;
              // }, 
              minOpacity: 0.1,
              maxOpacity: 1,
              label: {
                  normal: {
                      formatter: '{b}',
                      position: [10, -10], //控制坐标显示内容的位置[左,上]
                      show: false //控制是一直显示左边内容还是鼠标悬浮显示坐标内容
                  },
                  emphasis: {
                      show: true
                  }
              },
              itemStyle: {
                  normal: {
                        color: '#F06C00',
                  }
              }
          },
          ]
      }
    };
  },
  mounted() {
    axios.get("static/map/zhejiang.json").then((result) => {
      echarts.registerMap('zhejiang', result.data);
      this.myChart = echarts.init(this.$refs.map);
      this.myChart.setOption(this.option);
      this.myChart.on("click", this.chartClick);
    }).catch((error) => {
      console.log(error)
    });
  },
  
  methods: {
    chartClick(param){
      this.myChart.setOption(this.option, false);//防止地图继续下钻，若需要继续下钻可以注释掉，敲黑板，此处是同一个元素，不是冒泡，
      if (this.provinceList.indexOf(param.name) == -1) return  

      // 假设这是后台请求回来的数据
      let list = [
        {latitude: "30.446307", longitude: "120.247705", num: "3", zone1: "杭州1", province: "广东"},
        {latitude: "30.193416", longitude: "120.257479", num: "3", zone1: "杭州2", province: "广东"},
        {latitude: "30.175934", longitude: "119.915404", num: "20", zone1: "杭州3", province: "广东"},
        {latitude: "29.972911", longitude: "119.993593", num: "10", zone1: "杭州4", province: "广东"},
        {latitude: "29.972911", longitude: "119.723382", num: "4", zone1: "杭州5", province: "广东"},
        {latitude: "29.735353", longitude: "119.948749", num: "50", zone1: "杭州6", province: "河南"}
      ];
      for(var i = 0; i < list.length; i++){
        this.geoData.push({name:list[i].zone1,value:list[i].num});
        this.geoArr.push({key:list[i].zone1,value:[list[i].longitude,list[i].latitude]});
        this.geoCoordMap[list[i].zone1] = [list[i].longitude,list[i].latitude];
      }
      var citymaps = param.name;
      this.choosecity.forEach((item,index) => {
        if(item.name == citymaps){
          var s = this.choosecity.slice(0,index+1);
          this.choosecity = s;
        }
      });
      if(citymaps != this.choosecity[this.choosecity.length -1].name){
        this.choosecity.push({name: citymaps});
      }
      
      this.option.title.text = param.name + "分布图";
      axios.get(this.cityProper[param.name]).then((result) => {
        echarts.registerMap(citymaps, result.data);
        this.option.geo[0] = {
            type: 'map',  
            map: citymaps,  // 地区名字，重要参数
            roam: true,
            itemStyle: {
                areaColor: "#d7bed9",
                borderColor: "#111",
            },
            emphasis: {
              label:{
                show: false
              },
              itemStyle: {
                areaColor: "#f5d4f8"
              }
            },
            data: [],  // 数据，重要参数
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                emphasis: {
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
        };
        if(citymaps === '浙江省'){
          this.option.series[0].data = [['120.216481', '30.251863']];
        }else if(citymaps === '杭州市'){
          this.option.series[0].data = this.convertData(this.geoData);
        }else if(citymaps === '金华市'){
          this.option.series[0].data = [{name: '金华市政府', value:['119.653656', '29.085538']},{name: '金华市政府', value:['120.09504', '29.338159']}]; 
        }else{
          this.option.series[0].data = [];
        }
        this.myChart.setOption(this.option, true);
      }).catch((error) => {
        console.log(error)
      });
    },

    mapsize(citymaps){
      if(citymaps == '杭州市'){
        return 0.5
      }else{
        return 0.3
      }
    },
    convertData(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          });
        }
      }
      return res;
    },
  }
};
</script>